<template>
  <div class="process-steps">
    <div class="step-item" v-for="(item, index) in list" :key="index">
      <div
        :class="[
          'step-item_main',
          renderBgImg(index),
          renderActiveBgImg(item.status, index),
        ]"
        @click="handleClick(item, index)"
      >
        <i>{{ index + 1 }}</i>
        <span>{{ item.periodName }}</span>
      </div>
      <div :class="['step-item_time', { 'active-txt': activeIndex === index }]">
        {{ item.periodStartTime }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      activeIndex: 0,
    };
  },
  methods: {
    renderBgImg(idx) {
      if (idx === 0) return "begin-bg";
      if (idx === this.list.length - 1) return "end-bg";
      return "bg";
    },
    renderActiveBgImg(status, idx) {
      if (status != null && status != 1) return;
      if (idx == 0) return "begin-active";
      if (idx === this.list.length - 1) return "end-active";
      return "active";
    },
    handleClick({ active, periodId }, idx) {
      if (this.activeIndex === idx) return;
      if (!active) {
        this.$message.error("上一阶段还未完成");
        return;
      }
      this.activeIndex = idx;
      this.$emit("change", periodId);
    },
  },
};
</script>

<style lang="scss" scoped>
.process-steps {
  display: flex;
  .step-item {
    &_main {
      min-width: 130px;
      height: 32px;
      display: flex;
      align-items: center;
      padding: 0 25px;
      font-size: 14px;
      background-size: 100% 100%;
      color: #333;
      cursor: pointer;
      i {
        width: 20px;
        line-height: 20px;
        margin-right: 8px;
        font-style: initial;
        text-align: center;
        background-size: 100% 100%;
        background-image: url("../../../assets/static/steps/icon.png");
      }
    }
    &_time {
      line-height: 1.5;
      font-size: 12px;
      margin-top: 8px;
      text-align: center;
      color: #999;
    }
  }

  .begin-bg {
    background-image: url("../../../assets/static/steps/begin.png");
  }
  .bg {
    background-image: url("../../../assets/static/steps/step.png");
  }
  .end-bg {
    background-image: url("../../../assets/static/steps/end.png");
  }
  .begin-active {
    background-image: url("../../../assets/static/steps/begin-active.png");
  }
  .active {
    background-image: url("../../../assets/static/steps/step-active.png");
  }
  .end-active {
    background-image: url("../../../assets/static/steps/end-active.png");
  }
  .begin-active,
  .active,
  .end-active {
    color: #fff;
    cursor: pointer;
    i {
      color: #3b95ff;
    }
  }
  .active-txt {
    font-weight: bold;
    color: #0b847b;
  }
}
</style>
